{% extends 'user/master.html' %}
{% block CSS %}
    <style>
        a:active {
            color: #778087;
            text-decoration: none;
            word-break: break-all;
        }
        .problem {
            padding: 10px;
            font-size: 14px;
            line-height: 120%;
            text-align: left;
            background-color: #ffffc0;
            border-left: 5px solid #fff000;
            border-bottom: 1px solid #e2e2e2;
            color: #333;
        }
    </style>
{% endblock %}
{% block main %}
    <div class="box">
        <div class="header"><a href="{% url 'index' %}">V2EX</a> <span class="chevron">&nbsp;›&nbsp;</span> <a
                href="{% url 'settings' %}">设置</a> <span class="chevron">&nbsp;›&nbsp;</span> 图像
        </div>
        {% if has_error %}
            <div class="problem">请解决以下问题：
                <ul>
                    {% if obj.errors.avatar.0 %}
                        <li>{{ obj.errors.avatar.0 }}</li>
                    {% endif %}
                    {% if avatar_size_error %}
                        <li>{{ avatar_size_error }}</li>
                    {% endif %}
                </ul>
            </div>
        {% endif %}
        <div class="inner">
            <form method="post" action="{% url 'settings_avatar' %}" enctype="multipart/form-data">
                {% csrf_token %}
                <table cellpadding="5" cellspacing="0" border="0" width="100%">
                    <tbody>
                        <tr>
                            <td width="120" align="right">当前头像</td>
                            <td width="auto" align="left">
                                <img src="{{ user_obj.avatar }}" class="avatar" border="0" align="default">
                            </td>
                        </tr>
                        <tr>
                            <td width="120" align="right">选择一个图片</td>
                            <td width="auto" align="left"><input type="file" name="avatar"></td>
                        </tr>
                        <tr>
                            <td width="120" align="right"></td>
                            <td width="auto" align="left"><span class="gray">支持 2MB 以内的 PNG / JPG / GIF 文件</span></td>
                        </tr>
                        <tr>
                            <td width="120" align="right"></td>
                            <td width="auto" align="left">
                                <input type="submit" class="btn btn-sm" value="开始上传">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
</div>
{% endblock %}